<template>
  <el-form label-position="top">
    <el-form-item 
      v-for="(slot, key) in component.slots" 
      :key="key" 
      :label="slot.label || key"
    >
      <el-input
        v-if="!slot.isComponent"
        v-model="componentSlotsModel[key].content"
        type="textarea"
        :rows="3"
        :placeholder="slot.placeholder || '输入插槽内容'"
      />
      <template v-else>
        <el-select
          v-model="componentSlotsModel[key].content"
          placeholder="选择组件"
          style="width: 100%; margin-bottom: 10px;"
        >
          <el-option
            v-for="option in slot.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <el-form
          v-if="componentSlotsModel[key].content && slot.propsConfig"
          label-position="top"
        >
          <el-form-item
            v-for="(propConfig, propKey) in slot.propsConfig"
            :key="propKey"
            :label="propConfig.label || propKey"
          >
            <component
              :is="getPropertyEditor(propConfig.type)"
              v-model="componentSlotsModel[key].props[propKey]"
              v-bind="propConfig.editorProps || {}"
            />
          </el-form-item>
        </el-form>
      </template>
      <div class="slot-description" v-if="slot.description">
        {{ slot.description }}
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SlotsConfig',
  props: {
    component: {
      type: Object,
      required: true
    },
    componentSlots: {
      type: Object,
      required: true
    },
    getPropertyEditor: {
      type: Function,
      required: true
    }
  },
  emits: ['update:componentSlots'],
  setup(props, { emit }) {
    // 使用计算属性创建双向绑定
    const componentSlotsModel = computed({
      get: () => props.componentSlots,
      set: (value) => emit('update:componentSlots', value)
    })

    return {
      componentSlotsModel
    }
  }
})
</script>

<style scoped>
.slot-description {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style>